<template>
  <a-modal
    title="微信推送"
    :width="600"
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
  >


    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <!--companyId-->
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="发送类型">
          <a-select
            @change="handleProvinceChange"
            v-decorator="[ 'choosetype', {rules: [{ required: true, message: '请选择发送类型' }],initialValue: defaultValue}]"
            placeholder="请选择发送类型">
            <a-select-option :value="type.id" v-for="type in typeList" :key="type.id">
              {{type.name}}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item v-if="flag" :label-col="labelCol" :wrapper-col="wrapperCol" label="发送类型">
          <a-select
            mode="multiple"
            labelInValue
            :value="value"
            placeholder="选择人员"
            style="width: 100%"
            :filterOption="false"
            @search="fetchUser"
            @change="handleChange"
            :notFoundContent="fetching ? undefined : null"
          >
            <a-spin v-if="fetching" slot="notFoundContent" size="small"/>
            <a-select-option v-for="d in data" :key="d.openid">{{d.name}}</a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>
<script>
  import jsonp from 'fetch-jsonp'
  import querystring from 'querystring'
  import debounce from 'lodash/debounce'
  import {push} from '@/api/message/activity'
  import { selectSendMember } from '@api/business/member'
  export default {
    //--############  data() ###############-->
    data() {
      this.lastFetchId = 0;
      this.fetchUser = debounce(this.fetchUser, 800);
      return {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        data: [],
        value: [],
        id:'',
        fetching: false,
        flag:false,
        visible: false,
        queryParam:{},
        confirmLoading: false,
        form: this.$form.createForm(this),
        defaultValue:0,
        typeList:[{id:0,name:'全部'},{id:1,name:'选择发送'}],
      }
    },
    //--############  data() ###############-->

    created() {
    },

    //--############  methods() ###############-->
    methods: {

      Send(id){
        this.visible=true
        this.id = id
      },

      close() {
        this.$emit('close')
        this.visible = false
      },
      handleOk() {
        const _this = this
        // 触发表单验证
        this.form.validateFields((err, values) => {
          // 验证表单没错误
          if (!err) {
            values.id = this.id
            values.openids = this.value.map(member => (member.key));
            console.log(JSON.stringify(values))
            _this.confirmLoading = true
            push(values).then((res) => {
              if (res.code === 200) {
                _this.$message.success('发送成功')
                _this.$emit('ok')
                _this.close()
              } else {
                this.$notification.error({
                  message: '错误',
                  description: res.message,
                  duration: 4
                })
              }
            }).catch(() => {
              // Do something
            }).finally(() => {
              _this.confirmLoading = false
            })
          }
        })



        _this.$emit('ok')
        _this.close()
      },
      handleCancel() {
        this.close()
      },
      handleProvinceChange(value) {
        this.flag = value
      },
      fetchUser (value) {
        this.lastFetchId += 1;
        const fetchId = this.lastFetchId;
        this.data = []
        this.fetching = true
        this.queryParam.filter = value
        selectSendMember(this.queryParam)
          .then(res => {
            if (res.code === 200) {
              if (fetchId !== this.lastFetchId) {
                return;
              }
              console.log(res)
              const data = res.result.map(member => ({
                openid: member.openid,
                name: member.name,
              }));
              this.data = data
              this.fetching = false
            } else {
              this.$notification.error({
                message: '错误',
                description: res.message,
                duration: 4
              })
              return;
            }
          })
      },
      handleChange (value) {
        Object.assign(this, {
          value,
          data: [],
          fetching: false,
        })
      }
    }
    //--############  methods() ###############-->
  }
</script>